import { Layout, Menu, MenuProps } from 'antd';
import {
  AppstoreOutlined,
  PieChartOutlined,
  DesktopOutlined, 
  ContainerOutlined, 
  UploadOutlined, 
  MailOutlined, 
  UserOutlined, 
  VideoCameraOutlined
} from '@ant-design/icons';
import React from 'react';
import Mouse from './Mouse';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group'
  ): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}
const MenuJson = [
  {
    label: 'Option1',
    key: '1',
    icon: <PieChartOutlined />
  },
  {
    label: 'Option2',
    key: '2',
    icon: <DesktopOutlined />
  },
  {
    label: 'Option3',
    key: '3',
    icon: <ContainerOutlined/>
  },
  {
    label: 'Navigation One',
    key: 'sub1',
    icon: <ContainerOutlined/>,
    children: [
      {
        label: 'Option 11',
        key: '11',

      }, {
        label: 'Option 12',
        key: '12',

      }
    ]
  }]

const handlerMenu  = ()=> {
  const MemuItems: MenuItem[] = []

  MenuJson.map(item =>{
    const itemObj:MenuItem = getItem(item.label, item.key, item.icon)
    if(item.children){
      const chlidObj =  item.children.map(childItem =>{
          getItem(childItem.label, childItem.key)
      })
      console.log(chlidObj);
    }
    MemuItems.push(itemObj)
  })
 // console.log(MemuItems);
  return MemuItems
}

const items: MenuItem[] = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem('Option 2', '2', <DesktopOutlined />),
  getItem('Option 3', '3', <ContainerOutlined />),

  getItem('Navigation One', 'sub1', <MailOutlined />, [
    getItem('Option 5', '5'),
    getItem('Option 6', '6'),
    getItem('Option 7', '7'),
    getItem('Option 8', '8'),
  ]),

  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),
    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
  ]),
];
interface SideMenuProps{
    fuckProps : string,
    collapsed : false
}

class SideMenu extends React.Component<SideMenuProps> {

  state = {
    menuItem: [
      {
        key: '1',
        icon: <UserOutlined />,
        label: 'nav 1',
      },
      {
        key: '2',
        icon: <VideoCameraOutlined />,
        label: 'nav 2',
      },
      {
        key: '3',
        icon: <UploadOutlined />,
        label: 'nav 3',
      },
    ],
    userInput:[
      {
        id:"0",
        inputName:"test",
        content:"test"}
    ],
    userName:"",
    userCommod:""
  };

  toggle = () => {
    this.setState({
      collapsed: !this.props.collapsed,
    });
  };
  handleForm = (e: any) =>{
   const {name, value } = e.target
   this.setState({
     [name]:value
   })
  }

  publishCom = (_e: any) =>{
    
    const {userName,userCommod,userInput } = this.state

    console.log(userInput)  

    const newUserInput = [
      { id: String(++userInput.length),
      inputName:userName,
      content:userCommod},
        ...userInput]
    

    const last = newUserInput.filter(items=>(items!=undefined))  
    this.setState({
      userInput:last,
      userName:"",
      userCommod:""
    });
  }
  getChilidMsg = (data:object) =>{
     console.log("接收来子的data",data)
     
  }


  render() {
   // console.log(this.props)
    return (
      <Layout>
       <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
            <div className="logo" style={{color:'white',height:'70px'}} >Here is My logo </div>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              items={items}
            />
        </Sider>
        {/*  mouseMove 是一个匿名的函数, 传入数据是 Mouse mouve的 state */}
        <Mouse mouseMove = {(data:any)=>{
          return(
              <div> x: {data.x }, y: {data. y}</div>
          )
        }}/>

        <Mouse mouseMove = {(data:any)=>{
             return(
              <img src="{MenuFoldOutlined}" style={{left:data.x,top:data.y, position: 'absolute'} } ></img>
          )
        }}/>

      </Layout>
 
    );
  }
}


export default SideMenu;